<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/world.js'
import 'echarts/map/js/china.js'
require('echarts/theme/macarons') // echarts theme: dark infographic macarons roma shine vintage
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions(this.chartData)
    },
    setOptions({ title, subtext, legend, mapTypeControl, mapType, expectedLabel, expectedData } = {}) {
      const option = {
        title: {
          text: title,
          subtext: subtext,
          x: 'center'
        },
        grid: {
          left: 20,
          right: 50,
          bottom: 60,
          top: 60,
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
        // 左下角的颜色区域
        visualMap: {
          type: 'piecewise', // 定义为分段型 visualMap
          min: 0,
          max: 99999,
          itemWidth: 40,
          bottom: 60,
          left: 20,
          pieces: [ // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
            { gt: 300, lte: 99999, label: '非常多', color: 'orangered' },
            { gt: 150, lte: 300, label: '较多', color: '#ff9800' },
            { gt: 50, lte: 150, label: '一般', color: '#ffeb3b' },
            { gt: 0, lte: 50, label: '较少', color: '#9adcfa' },
            { value: 0, label: '无数据', color: '#999' }
          ]
        },
        // geo配置详解： https://echarts.baidu.com/option.html#geo
        geo: { // 地理坐标系组件用于地图的绘制
          map: 'china', // 表示中国地图
          roam: true, // 是否开启鼠标缩放和平移漫游
          zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
          label: {
            show: true
          },
          itemStyle: { // 地图区域的多边形 图形样式。
            borderColor: 'rgba(0, 0, 0, 0.2)',
            emphasis: { // 高亮状态下的多边形和标签样式
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          x: 'right',
          y: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: true },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        roamController: {
          show: true,
          x: 'right',
          mapTypeControl: mapTypeControl
        },
        series: [
          {
            name: expectedLabel,
            type: 'map',
            geoIndex: 0,
            // mapType: mapType,
            // roam: false,
            // itemStyle: {
            //   normal: { label: { show: true }},
            //   emphasis: { label: { show: true }}
            // },
            data: expectedData
          }
        ]
      }

      this.chart.setOption(option)
    }
  }
}
</script>
